<!-- 四张图片带标题横线部分---封装的单个 -->
<template>
    <div class="column column--grid" v-for='(item, index) in props.fourTitleImgData' :key='item.id'>
        <header class="header header--secondary" v-if='props.headTitle'>
            <router-link class="title" :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                <div class="title__icon">
                    <img alt="Section Icon" v-if='index === 0' class="lazyloaded"
                        data-src="https://s.marketwatch.com/public/resources/images/MW-HG626_moneyi_NS_20190328220901.png"
                        src="https://s.marketwatch.com/public/resources/images/MW-HG626_moneyi_NS_20190328220901.png">
                </div>
                <div class="link">{{ item.author }}</div>
            </router-link>
        </header>
        <header class="header header--secondary" v-if='props.retireTitle'>
            <div class="link">{{ item.title }}</div>
        </header>
        <div class="module module--section">
            <!-- <div class="title__header link" style="width: 100%" v-if='item.imgUrl'>
                <a href="" target="_blank">
                    <img alt="" class="lazyloaded" :data-src="item.imgUrl" :src="item.imgUrl">
                </a>
            </div> -->
            <div class="column column--full">
                <div class="element element--article is-lead MarketWatchcom">
                    <figure class="article__figure">
                        <router-link class="figure__image"
                            :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                            <img class=" lazyautosizes" :data-srcset="item.imgUrl" sizes="278px" :srcset="item.imgUrl"
                                v-if="item.imgUrl">
                            <img src="../../assets/noimg.png" v-else>
                        </router-link>
                    </figure>
                    <div class="article__content">
                        <h3 class="article__headline">
                            <router-link class="link"
                                :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                                {{ item.title }}
                            </router-link>
                        </h3>
                    </div>
                </div>
                <div class="element element--article" v-for="item1 in item.news" :key='item1.uuid'>
                    <div class="article__content">
                        <h3 class="article__headline">
                            <router-link class="link"
                                :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                                {{ item1.title }}
                            </router-link>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="element element--section-footer" v-if='props.seeMore'>
                <a class="btn btn--section" data-track-query="" data-track-code="" href="">See More</a>
            </div>
        </div>
    </div>
</template>
<script setup>
let props = defineProps(['fourTitleImgData', 'headTitle', 'seeMore', 'retireTitle'])
onMounted(() => {

})
</script>
<style lang='scss' scoped></style>